import { useState } from 'react';
import './Tabs.css';

const Tabs = ({ children, defaultActiveTab = 0 }) => {
  const [activeTab, setActiveTab] = useState(defaultActiveTab);

  // 确保children是数组
  const tabsArray = Array.isArray(children) ? children : [children];
  
  // 过滤掉无效的tab
  const validTabs = tabsArray.filter(tab => tab && tab.props);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  return (
    <div className="tabs-container">
      {/* Tab导航 */}
      <div className="tabs-header">
        {validTabs.map((tab, index) => (
          <button
            key={index}
            className={`tab-button ${activeTab === index ? 'active' : ''}`}
            onClick={() => handleTabClick(index)}
            title={tab.props.title || tab.props.label}
          >
            <span className="tab-icon">{tab.props.icon}</span>
            <span className="tab-label">{tab.props.label}</span>
            {tab.props.badge && (
              <span className="tab-badge">{tab.props.badge}</span>
            )}
          </button>
        ))}
      </div>
      
      {/* Tab内容 */}
      <div className="tabs-content">
        {validTabs.map((tab, index) => (
          <div
            key={index}
            className={`tab-panel ${activeTab === index ? 'active' : ''}`}
          >
            {tab.props.children}
          </div>
        ))}
      </div>
    </div>
  );
};

// Tab组件
const Tab = ({ label, icon, badge, title, children }) => {
  return { label, icon, badge, title, children };
};

export { Tab };
export default Tabs;
